div.milestones {
    .no-open-milestones, .no-closed-milestones {
        padding: 60px 0 0;
        text-align: center;
        font-size: 0.9em;
        color: #CCCCCC;
    }

    .no-open-milestones {
        margin: 60px 0 40px;
        background: url('current-milestones.png') no-repeat center top;
    }

    .no-closed-milestones {
        margin: 90px 0 40px;
        background: url('done-milestones.png') no-repeat center top;
    }

    #load-closed-milestone {
        display: block;
        width: 50%;
        margin: 50px auto;
        padding: 7px;
    }

    .milestones-separator {
        position: relative;
        top: 20px;
        margin: 0px 0 50px;
        text-align: center;
        font-size: 0.9em;
        opacity: 0.25;

        > span {
            padding: 10px;
            background: #FCFCFC;
        }

        &::after {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            border-bottom: 1px solid #AAAAAA;
        }
    }

    > fieldset.milestone {
        padding: 0 0 1px;
        margin-bottom: 20px;
        background: #FFFFFF;
        border-radius: 3px;
        box-shadow: inset 1px 0 #E9E9E9, inset 0px -1px #E9E9E9, inset -1px 0 #E9E9E9;

        legend {
            padding: 0 10px 0 30px;
            margin-bottom: 0;
            font-size: 1.2em;
            background: #FFF url('/themes/common/images/toggle-fontawesome-minus.png') no-repeat 10px 14px;
            border-top: 1px solid #E9E9E9;
            border-right: 1px solid #E9E9E9;
            border-left: 1px solid #E9E9E9;
            border-bottom: 2px solid #B2B2B2;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            cursor: pointer;
            transition: background-color 0.1s linear;

            &:hover {
                background-color: #FAFAFA;
                transition: background-color 0.1s linear;
            }

            > span.date {
                float: right;
                font-size: 0.7em;
                color: #7F7F7F;
            }

            > span.status {
                float: right;
                position: relative;
                top: 10px;
                margin: 0 0 0 10px;

                &.open {
                    background-color: #6AB537;
                }
            }

            > .btn-group.dropdown {
                display: inline-block;
                position: relative;
                top: -2px;
                left: 5px;

                > ul.dropdown-menu {
                    top: 32px;
                }

                &.ng-enter {
                    animation: fadeIn 0.2s;
                }

                &.ng-leave {
                    animation: fadeOut 0.2s;
                }
            }
        }

        div.content {
            padding: 0 1px;

            > div.info {
                margin: 0 0 10px;
                padding: 6px 10px 4px;
                background: #F2F2F2;
                box-shadow: 0px 1px 0px 0px #E5E5E5;

                > span.capacity, > span.initial-effort {
                    font-size: 0.9em;
                    color: #7F7F7F;
                }

                > span.capacity-value, > span.initial-effort-value {
                    font-size: 1em;
                    font-weight: 700;
                    color: #555;
                    margin: 0 15px 0 0;
                }

                > span.initial-effort-value {
                    color: #6AB537;

                    &.non-applicable {
                        color: #555;
                    }

                    &.higher {
                        color: #DD0000;
                    }
                }

                > ul {
                    margin: 0;
                    float: right;

                    > li {
                        float: left;
                        list-style-type: none;
                        margin: 0 15px 0 0;
                        font-size: 0.9em;

                        &:last-child {
                            margin: 0;
                        }

                        > a {
                            color: #444444;
                            transition: all 0.05s linear;

                            @media screen and (max-width: 1400px) {
                                > span {
                                    display: none;
                                }
                            }

                            &:hover {
                                text-decoration: none;
                                color: #888888;
                            }
                        }
                    }
                }
            }

            > .loading {
                margin: 0 0 10px;
            }

            ul.backlog-items {
                margin: 12px 10px;

                &.empty-milestone {
                    background: transparent url('milestone-empty.png') no-repeat center center;
                    height: 100px;
                }
            }
        }

        &.collapsed {
            box-shadow: none;

            legend {
                border-bottom: 1px solid #E9E9E9;
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
                background: #FFF url('/themes/common/images/toggle-fontawesome-plus.png') no-repeat 10px center;

                &:hover {
                    background-color: #FAFAFA;
                    transition: background-color 0.1s linear;
                }
            }

            div.content {
                overflow: hidden;
                padding: 0;
                height: 0;

                div.type-border {
                    display: none;
                }
            }
        }

        &.updating legend {
            background: #FFF url('loader-mini.gif') no-repeat 10px center;
        }
    }

}
